<template>
    <div id="main" ref="main"></div>

</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud'
const main = ref();
let myChart: any = null; // 全局变量

// 设置textStyle颜色
const getLineChart = () => {
    const cityList = [
        { name: "金水区", value: "111"},
        { name: "管城区", value: "222" },
        { name: "惠济区", value: "458" },
        { name: "二七区", value: "445" },
        { name: "新郑市", value: "456" },
        { name: "荥阳市", value: "647" },
        { name: "巩义市", value: "189" },
        { name: "经开区", value: "664" },
        { name: "郑东区", value: "652" },
        { name: "航空港区", value: "732" },
        { name: "郑州市", value: "852" , textStyle: { color: 'red' }},
    ];
    //词云图的配置项
    const option: any = {
        tooltip: {
            show: true,
            formatter: function (params: any) {
                // console.log(params.data);
                let tooltipText = `${params.name}: ${params.value}`;
                return tooltipText;
            }
        },
        series: [{
            name: '词云图',
            type: 'wordCloud',
            sizeRange: [10, 50],//文字范围
            //文本旋转范围，文本将通过rotationStep45在[-90,90]范围内随机旋转
            rotationRange: [-45, 90],
            rotationStep: 45,
            textRotation: [0, 45, 90, -45],
            //形状
            shape: 'circle',
            textStyle: {
                //文字色彩配置不生效的话，可以解开注释（echarts5默认注释掉），猜测是版本问题
                //normal: {
                color: function () {//文字颜色的随机色
                    return 'rgb(' + [
                        Math.round(Math.random() * 250),
                        Math.round(Math.random() * 250),
                        Math.round(Math.random() * 250)
                    ].join(',') + ')';
                },
                // },
                //悬停上去的字体的阴影设置
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: cityList
        }]
    };
    const chartDom = document.getElementById('main');
    if (chartDom) {
        myChart = echarts.init(chartDom); // 初始化图表
        myChart.setOption(option); // 设置图表选项
    }
};

// 监听窗口大小变化，重新渲染图表
const resizeHandler = new ResizeObserver(() => {
    if (main.value && myChart) {
        myChart.resize();
    }
});

// 监听 props 的变化


onMounted(() => {
    getLineChart();
    if (main.value) {
        resizeHandler.observe(main.value);
    }
});

onBeforeUnmount(() => {
    resizeHandler.unobserve(main.value);
});
</script>

<style scoped>
#main {
    width: 100%;
    height: 100%;
}
</style>